<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册店铺</title>
   <!-- <link rel="stylesheet" href="../plugins/Bootstrap/css/bootstrap.css">-->
    <script src="../plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script src="../plugins/Bootstrap/js/bootstrap.js"></script>
    <script src="../plugins/Bootstrap/css/bootstrap.css"></script>
    <!--&lt;!&ndash;线上css&ndash;&gt;
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">-->
    <!--线上 validator 校验 js 文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    <!--线上支持中文校验 js 文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>
    <script>

        //添加城市选项方法
        function addOption(obj,text) {
            //创建元素
            let option = document.createElement("option");
            //给元素添加内容
            option.value=text;
            option.innerText = text;
            //把新元素添加到指定标签内  --  末尾追加
            obj.appendChild(option);
        }
        $(function () {
            //地址改变事件
            $("#province").change(function () {
                if($(this).val()=="广东省"){
                    //清空内容再添加
                    $("#city").html("")
                    addOption(city,'请选择城市');
                    addOption(city,'广州');
                    addOption(city,'深圳');
                    addOption(city,'东莞');
                }else if($(this).val()=="广西壮族自治区"){
                    //清空内容再添加
                    $("#city").html("")
                    addOption(city,'请选择城市');
                    addOption(city,'南宁');
                    addOption(city,'柳州');
                    addOption(city,'桂林');
                }
            })
            //提交事件发送ajax请求
            $("#registerSotre").click(function () {
                let name = $("#storeName").val();
                let info = $("#storeInfo").val();
                let address = $("#province").val()+$("#city").val()+$("#detailAddress").val();
                let file = $('#storeImg')[0].files[0];
                //创建 FormData 对象存储表单信息
                let formData = new FormData();
                formData.append("name",name);
                formData.append("info",info);
                formData.append("address",address);
                formData.append("file",file);
                $.ajax({
                    type:'post',
                    url:'/taobei_web/Store/registerStore',
                    data:formData,
                    contentType:false,
                    processData:false,
                    dataType:'json',
                    success:function (respBean) {
                        if (respBean.status==500){
                            alert(respBean.msg)
                        } else {
                            alert(respBean.msg)
                            location.href="showStore.html"
                        }
                    }
                })
            })

            $("#form").bootstrapValidator({
                //设置校验状态
                feedbackIcons:{
                    //校验通过时输入框的状态
                    valid:'glyphicon glyphicon-ok',
                    //校验失败时输入框的状态
                    invalid:'glyphicon glyphicon-remove',
                    //刷新输入框的状态
                    validating:'glyphicon glyphicon-refresh'
                },
                //设置需要进行校验的属性
                fields:{
                    //匹配 input 标签的 name 属性值
                    storeName:{
                        //设置username的校验规则
                        validators:{
                            //非空校验
                            notEmpty:{
                                //提示语句
                                message:'用户名不能为空'
                            },
                            //长度限制
                            stringLength:{
                                min:3,
                                max:8
                            }
                        }
                    }
                }
            })
        })

    </script>
</head>
<body>
<div style="width: 400px;height: 600px;margin: 0 auto;">
    <div style="width: 300px;height: 400px;position: relative;left: 50px;">
         <form id="form">
             <div class="form-group" style="width: 300px;height: 80px;">
                 <label>
                     店名
                 </label>
                 <input type="text" placeholder="请输入店名" id="storeName" class="form-control" name="storeName"><br>
             </div>

             <div class="form-group" style="width: 130px;height: 50px;margin-top: 20px" >
                 <label>
                     店铺地址
                 </label>
                 <select name="province" id="province" class="form-control">
                     <option value="广东省">广东</option>
                     <option value="广西壮族自治区">广西</option>
                 </select>

                 <select name="city" id="city" class="form-control" style="position: relative;left: 150px;top: -34px">
                     <option>请选择城市</option>
                     <option value="广州">广州</option>
                     <option value="深圳">深圳</option>
                     <option value="东莞">东莞</option>
                 </select>
             </div>


             <div class="form-group">
                 <label>
                     详细地址
                 </label>
                 <input type="text" placeholder="详细地址" id="detailAddress" class="form-control">
             </div>

             <div class="form-group" style="width: 300px">
                 <label>
                     店铺简介
                 </label>
                 <input type="text" id="storeInfo" placeholder="店铺简介" class="form-control"><br>
             </div>

             <div class="form-group" style="width: 200px">
                 <label>
                     上传图片
                 </label>
                 <input type="file" id="storeImg"><br>
             </div>
             <div class="form-group">
                <!-- <input type="button" value="注册店铺" id="registerSotre" class="btn btn-default form-control">-->
                 <button id="registerSotre" class="btn btn-default form-control">注册店铺</button>
             </div>
         </form>
     </div>
 </div>

</body>
</html>